<%--
  Created by IntelliJ IDEA.
  User: cos
  Date: 2022/3/14
  Time: 14:44
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ taglib prefix="fm" uri="http://java.sun.com/jsp/jstl/fmt" %>
<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
<html>
<head>
    <title>Title</title>
    <style>
        #fu {
            border: 1px solid gainsboro;
            width: 800px;
            margin: 0px auto;
            text-align: center;
        }
    </style>

</head>
<body>
<div style="text-align: center">
    <form action="/entry/getBooksBycategoryId" method="get">
        <strong>文档分类:</strong>
        <select name="categoryId" id="categoryId">
            <%-- @TODO 使用ajax加载动态数据 --%>
            <option value="0">--查询所有--</option>
        </select>
        <input type="submit" value="查询">
        &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;
        <button type="button" id="btn1">新增电子文档</button>
    </form>
</div>
<div id="fu">
    <h1>电子文档列表</h1>
    <table border="1">
        <thead>
        <tr>
            <th>文档编号</th>
            <th>文档名称</th>
            <th>文档摘要</th>
            <th>上传人</th>
            <th>上传时间</th>
            <th>操作</th>
        </tr>
        </thead>
        <tbody>
        <%-- items 要遍历的集合数据 list 数据 map --%>
        <%-- var 每次赋值的变量名 --%>
        <%--
         for(var b:${books}){}
         --%>
        <c:forEach items="${books}" var="b">
            <tr>
                <td>${b.id}</td>
                <td>${b.title}</td>
                <td>${b.summary}</td>
                <td>${b.uploaduser}</td>
                <td>
                    <fm:formatDate value="${b.createdate}" pattern="yyyy-MM-dd"/>
                </td>
                <td>操作</td>
            </tr>
        </c:forEach>
        </tbody>
    </table>
</div>
<script>
    $(function () {
        $.ajax({
            type:"get",
            url:"/category/getAll",
            success:function (data) {
                for (let x in data) {
                    $("#categoryId").append("<option value='"+data[x].id+"'>"+data[x].name+"</option>")
                }
            }
        })
    })
</script>
</body>
</html>
